<template>
  <view class="trends" @click="toDetail(trends)">
    <view class="userInfo">
      <view style="display: flex">
        <view>
          <u--image :src="trends?.avatar" width="70rpx" height="70rpx" radius="50%">
            <template #error class="flex-center-center">
              <view class="ic-error">
                <u-icon name="photo" size="20"></u-icon>
              </view>
            </template>
          </u--image>
        </view>
        <view style="margin-left: 10rpx">
          <view class="nickname">{{ trends.nickname }}</view>
          <view class="nickuser">专家医生</view>
        </view>
      </view>
      <view style="display: flex">
        <view class="user_g" @click.stop="toFollow">关注</view>
        <view class="user_r" @click.stop="deleteArticle(trends, i)">
          <u-icon name="close" size="14" color="#333"></u-icon>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 内容 -->
      <view class="content_l">
        <view class="comment_a">{{ trends.title }}</view>
        <view class="comment_b">
          <view class="comment_b_l">{{ trends.category_text }}</view>
          <view class="comment_b_r">全文</view>
        </view>
      </view>
      <image class="content_r" :src="trends.image" mode="aspectFill"></image>
    </view>
    <view class="actions">
      <view class="actions_item">
        <u-icon
          name="https://ossresource.miyingbl.com/uploads/20240304/3a323d7bbcd45e66443c43c25867cde0.png"
          size="19"
        ></u-icon>
        <text>分享</text>
      </view>
      <view class="actions_item" @click.stop="toppicCollect()">
        <u-icon name="star-fill" size="20" v-if="trends.is_collect == 1" color="#FFB300"></u-icon>
        <u-icon name="star" size="20" v-else color="#333333"> </u-icon>
        <text>{{ trends.collect_number > 0 ? trends.collect_number : 0 }}</text>
      </view>
      <view class="actions_item" @click.stop="toppicPing()">
        <u-icon
          name="https://ossresource.miyingbl.com/uploads/20240304/94610cc057d42167004f2984ba4777c2.png"
          size="19"
        ></u-icon>
        <text>{{ trends.comment_number > 0 ? trends.comment_number : 0 }}</text>
      </view>
      <view class="actions_item" @click.stop="toppicZan()">
        <u-icon name="heart-fill" size="20" v-if="trends.is_like == 1" color="#FFB300"></u-icon>
        <u-icon name="heart" size="20" v-else color="#333333"></u-icon>
        <text>{{ trends.zan_number > 0 ? trends.zan_number : 0 }}</text>
      </view>
    </view>
  </view>

  <h-login top="50" ref="login"></h-login>
</template>

<script setup>
import { followApi } from '@/services/my/user'
import { ref, reactive } from 'vue'
import { trendsCategory, getTrendsList, trendsZan, trendsCollect } from '@/api/trends'
import {
  coupeDetails,
  collectPopularApi,
  kepuCommentListApi,
  kepulike,
  kepuComment,
  kepuCommentLike,
  kepuCommentDel,
} from '@/api/kepu'
import { useMemberStore, useSystemStore } from '@/stores'
import { negativeFeedbackApi } from '@/api/home'
import { showToast, navigateTo } from '@/utils'
const login = ref(null)
const store = useMemberStore()

const emit = defineEmits(['deleteArticle', 'itemTap', 'updateList', 'toLogin', 'share'])
const props = defineProps({
  trends: {},
  type: 1,
})

// 删除该文章
async function deleteArticle(row, index) {
  const res = await negativeFeedbackApi({
    id: row.id,
    type: 1,
  })
  showToast(res.msg)
  emit('deleteArticle', row, index)
}
const toDetail = (item) => {
  navigateTo('/baby/science/index?id=' + props.trends.id)
}

const toppicPing = () => {
  const token = store?.token
  if (!token) {
    login.value.open()
  } else {
    navigateTo('/baby/science/indexp?id=' + props.trends.id)
  }
}
const toppicCollect = async () => {
  const token = store?.token
  if (!token) {
    login.value.open()
    return false
  }
  const res = await collectPopularApi({
    id: props.trends.id,
  })
  if (res.msg == '收藏成功') {
    props.trends.collect_number++
  } else {
    props.trends.collect_number--
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}
const toFollow = async () => {
  const token = store?.token
  if (!token) {
    login.value.open()
    return false
  }

  try {
    const res = await followApi({
      follow_user_id: props.trends.id,
      type: props.type,
    })
    showToast(res.message)
    emit('updateList', row, i, 'is_follow')
  } catch (error) {
    console.log(error)
  }
}
const toppicZan = async () => {
  const token = store?.token
  if (!token) {
    login.value.open()
    return false
  }
  const res = await kepulike({
    id: props.trends.id, //动态id
  })
  if (res.msg == '取消成功') {
    props.trends.zan_number--
  } else {
    props.trends.zan_number++
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}
</script>

<style lang="scss">
.trends {
  padding: 24rpx;
  border-radius: 12rpx;
  background: #fff;
  .userInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .nickname {
      padding-left: 10rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
    }
    .nickuser {
      background: url('/static/baby/zjys.png') no-repeat;
      background-size: cover;
      width: 112rpx;
      height: 27rpx;
      text-align: center;
      line-height: 27rpx;
      font-size: 18rpx;
      color: #fff;
      margin-top: 6rpx;
      box-sizing: border-box;
      padding-left: 10rpx;
    }
  }
  .content {
    padding: 10rpx 0;
    .content_l {
      float: left;
      .comment_a {
        width: 440rpx;
        height: 84rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
      }
      .comment_b {
        padding-top: 10rpx;
        .comment_b_l {
          width: 440rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          float: left;
        }
        .comment_b_r {
          float: left;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #305e9d;
          line-height: 40rpx;
        }
      }
    }
    .content_r {
      float: right;
      width: 143rpx;
      height: 137rpx;
      border-radius: 10rpx;
    }
  }
  .actions {
    clear: both;
    display: flex;
    padding-top: 20rpx;
    justify-content: space-between;
    .actions_item {
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: center;
      text {
        padding-left: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }
}

.user_g {
  width: 72rpx;
  height: 32rpx;
  background: #ffffff;
  border-radius: 48rpx;
  border: 1rpx solid #ffb300;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 22rpx;
  color: #ffb300;
  line-height: 32rpx;
  text-align: center;
  margin-right: 20rpx;
}

.user_r {
  line-height: 70rpx;
  width: 34rpx;
  height: 34rpx;
  background: #f2f2f2;
  border-radius: 6rpx;
  box-sizing: border-box;
  padding: 4rpx;
}
</style>
